<template>
  <div>
    <ElDivider>同步变量介绍</ElDivider>
    <ElTag>{{ a }}</ElTag>
    <!-- v bind : {{  }} 单向绑定 -->
    <ElInputNumber v-model="a"></ElInputNumber>
    <!-- v model 双向绑定 -->
    <ElLink>{{ aa }}</ElLink>
    <ElDatePicker v-model="timeStartEnd" type="datetimerange"></ElDatePicker>
    <ElButton @click="init()">模拟请求载入信息</ElButton>
    <ElInputNumber v-model="b"></ElInputNumber>
    <ElTag>{{ b }}</ElTag>
    <ElInputNumber v-model="bb"></ElInputNumber>
    <ElTag>{{ bb }}</ElTag>
    <ElDivider>next-tick介绍</ElDivider>
    <ElButton @click="show()">show</ElButton>
    <ElButton @click="hide()">hide</ElButton>
    <ElTag v-if="d" ref="target" type="success">target</ElTag>
    <!-- document.appendChild("eltag") -->
    <ElDivider> vfor 配合 ref</ElDivider>
    <ElTag ref="some" type="warning">some</ElTag>
    <ElTag ref="any" type="danger">any</ElTag>
    <template v-for="(g, j) in 5" :key="j">
      <template v-for="(e, i) in 9" :key="i">
        <ElButton @click="console.log(e, i)" type="success" :ref="j" class="btn"
          >{{ g }}{{ e }}</ElButton
        >
      </template>
      <ElDivider>==</ElDivider>
    </template>
    <ElButton type="danger" @click="trigger()">trigger</ElButton>
    <ElDivider>新式ref</ElDivider>
    <template v-for="(e, i) in 5" :key="i">
      <ElButton ref="btn" @click="console.log(e)">{{ e }}</ElButton>
    </template>
    <ElButton @click="console.log($refs.btn[0].ref.click())">trigger</ElButton>
    <ElDivider>---</ElDivider>
    <template v-for="(g, i) in 3" :key="i">
      <template v-for="(e, j) in 6" :key="j">
        <ElButton
          :ref="
            (el:any) => {
              addItem(el,i ,j)
            }
          "
          @click="console.log(i,j)"
          >{{ i }}行{{ j }}列</ElButton
        >
      </template>
      <ElDivider>---</ElDivider>
    </template>
    <ElButton @click="btns[1][3].ref.click()">trigger</ElButton>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
export type LeaveBill = {
  timeStart: null | string | Date
  timeEnd: null | string | Date
  billCode: string
}
export default defineComponent({
  name: 'PractiseOne',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      a: 12,
      b: 100,
      bb: 200,
      leaveBill: {
        timeStart: null,
        timeEnd: null,
        billCode: 'xxx'
      } as LeaveBill,
      //   xx: null
      d: false,
      btns: [] as Array<Array<any>>
      // [["xx",'xxx',"xxxx"],["yy",'yyy',"yyyy"]]
    }
  },
  computed: {
    /* sampleC() {
          return this.sampleD + "--";
        }, */
    // aa() {
    //   return this.a + 100
    // }
    aa: {
      get() {
        return this.a + 100
      },
      //   设置值
      set(aavalue: number) {
        this.a = aavalue - 100
      }
    },
    timeStartEnd: {
      get() {
        if (this.leaveBill.timeStart && this.leaveBill.timeEnd) {
          return [this.leaveBill.timeStart, this.leaveBill.timeEnd]
        } else {
          return null
        }
      },
      set(xxvalue: Array<string> | null) {
        if (xxvalue) {
          this.leaveBill.timeStart = xxvalue[0]
          this.leaveBill.timeEnd = xxvalue[1]
        } else {
          this.leaveBill.timeStart = null
          this.leaveBill.timeEnd = null
        }
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    init() {
      this.leaveBill = {
        timeStart: '2023-02-04',
        timeEnd: '2023-02-07',
        billCode: 'xxx'
      }
    },
    showInner(row: any) {
      console.log('showing' + row)
    },
    show() {
      // this.showInner()
      // nexttick  晚一点再执行  晚亿点再执行
      // this.$nextTick(()=>{
      //   console.log("showing")
      // })
      // nexttick 类似settimeout(()=>{},0)

      // this.d=!this.d;
      // document.querySelector("eltag #target")
      // this.$nextTick(() => {
      // this.d = !this.d
      this.d = true
      // eltag add v-if=true
      this.$nextTick(() => {
        const target = this.$refs.target
        console.log(target)
      })
      // })

      // this.$nextTick(() => {
      //   // this.showInner(1)
      //   console.log('showing' + 1)
      //   console.log('showing' + 1)
      //   console.log('showing' + 1)
      // })
    },
    hide() {
      this.d = false
      this.$nextTick(() => {
        const target = this.$refs.target
        console.log(target)
      })
    },
    trigger() {
      const a: any = this.$refs[1]
      const btn = a[3]
      console.log(btn)

      // a[8].click()
    },
    addItem(el: any, i: number, j: number) {
      this.btns[i] = this.btns[i] || []
      this.btns[i][j] = el
    }
  },
  watch: {
    // sampleP(n, o) {},
    b(n, o) {
      // console.log('xxxx')
      // console.log(n, o)
      // console.log(n === this.b)
      // this.bb = this.b
      this.bb = n + 100
    },
    bb(n, o) {
      // this.b = this.bb - 100
      this.b = n - 100
    }
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
